import { Component } from 'react'
import Add from '../components/add'
import Sub from '../components/sub'
import News from '../components/news'
import NewsConnect from '../components/newsConnect'
import NewsSubscribe from '../components/newsSubscribe'
import Card from '../components/card'

class Home extends Component {
	render() {
		return (
			<div>
				<Card title="测试组件 Add 中">
					<Add></Add>
					<pre>const {'{ connect }'} = 'react-redux'</pre>
					<pre>
						mapStateToProps = state =&gt; (
						{'{ count: state.count }'})
					</pre>
					<pre>
						mapDispatchToProps = dispatch =&gt; (
						{'{ onIncrease: dispatch({type, count}) }'})
					</pre>
					<pre>connect(mapStateToProps, mapDispatchToProps)(Add)</pre>
				</Card>

				<Card title="测试组件 Sub 中">
					<Sub></Sub>
					<pre>store = redux.createStore(reducer)</pre>
					<pre>store.subscribe(callback)</pre>
					<pre>store.getState()</pre>
					<pre>store.dispatch({'{ type, value }'})</pre>
				</Card>

				<br />

				{/* 公共数据更新, 用 react-dedux 中的 connect, 或者用 store.subscribe(callback) */}
				<Card title="测试组件 News">
					<News></News>
				</Card>

				<Card title="测试组件 NewsConnect">
					<NewsConnect></NewsConnect>
				</Card>

				<Card title="测试组件 NewsSubscribe">
					<NewsSubscribe></NewsSubscribe>
				</Card>
			</div>
		)
	}
}

export default Home
